import { Text, View } from "@tarojs/components";
import { useBoolean } from "ahooks";

import ByRow from "@/components/ui/ByRow";
import Sticky from "@/components/app/Sticky";
import CartProductItem from "./CartProductItem";

import { MaterialAreaDetail } from "@/types/material";
import ByIcon from "@/components/ui/ByIcon";

/**
 * "chooseType":        // 选材类型，1:主材选材 2:家具选材 3:灯具窗帘选材 4:电器选材
"status"// 0.待提交 1.已提交 2.客户确认
 */

type MaterialSectionProps = {
  disabled?: boolean;
  source: MaterialAreaDetail;

  setSelected: (index: number) => void;
  setMaterialItem: (
    index: number,
    e: MaterialAreaDetail["DetailDTOList"][number]
  ) => void;

  onReset: (res: any) => void;
};

export default ({
  source,
  disabled,
  onReset,
  setSelected,
  setMaterialItem,
}: MaterialSectionProps) => {
  const [fold, { toggle }] = useBoolean(true);

  const hadSettedCount = source.DetailDTOList.filter(
    (e) => e.State === 0
  ).length;

  return (
    <View className="relative bg-white mb-3">
      <Sticky position="top" className="z-10 bg-white">
        <ByRow
          align="center"
          className="p-3"
          content="between"
          onClick={toggle}
        >
          <View>
            <Text className="text-lg">{source.Area || ""}</Text>
            <Text className="pl-3 text-sm">
              (<Text className="text-primary">{hadSettedCount}</Text>/
              {source.DetailDTOList.length})
            </Text>
          </View>
          <Text className="text-sm text-third">
            <Text className="pr-1">{fold ? "展开" : "收起"}</Text>
            <ByIcon
              name="ArrowBottom"
              size={24}
              className={`inline-block duration-300 origin-center ${
                fold ? "rotate-0" : "rotate-180"
              }`}
            />
          </Text>
        </ByRow>
      </Sticky>

      {!fold && (
        <View className="px-3">
          {source.DetailDTOList.map((item, subIndex) => (
            <View key={item.ChooseId}>
              <CartProductItem
                source={item}
                disabled={disabled}
                onReset={onReset}
                onClick={() => setSelected(subIndex)}
                onChange={(e) => setMaterialItem(subIndex, e)}
              />
            </View>
          ))}
        </View>
      )}
    </View>
  );
};
